<ion-content>
  <div class="goods-head">

      <img src="../../../../assets/img/back.png" alt="" (click)="onBack()">
    <!-- <div class="goods-head-right">
          <img src="../../../../assets/img/activity/share.png" alt="">
        </div> -->
  </div>

  <div class="goods-carousel">
    <ion-slides mode="ios" pager="ios" [options]="slideOpts" scrollbar="ios">
      <ion-slide *ngFor="let item of headerSlideData">
        <div style="width:100%;">
          <img ionImgViewer src="{{item.src}}"
          style="width:100%"
            onerror="this.src='../../../../assets/img/index/pic.png';this.onerror=null" alt=""  title="" 
            text="" 
            scheme="dark"  cssClass='ion-img-viewer-img'   >
        </div>
      </ion-slide>
    </ion-slides>
  </div>

  <div class="price-content">
    <label class="price-lable">${{AmountOfConversion(shopDetail.procCashPrice)}}</label>
    <label class="through-line price-through">${{AmountOfConversion(shopDetail.procOldPrice)}}</label>
    <!-- <span style="float: right;margin-top: 3px;color: #666666;">{{shopDetail.salesVolume?shopDetail.salesVolume:'0'}} buy</span> -->
    <div class="goods-name-div">
      <ion-text class="goods-name" style="color:#333333;font-weight:500;font-family:PingFang SC;">
        {{shopDetail.procName}}
      </ion-text>
    </div>
    <p class="goods-right-amount">
      <label style="float: right;"> {{isStock}}</label>
    </p>
  </div>

  <ion-item lines="none" style="margin-top: 5px;color: #666666;background: #fff;">
    <ion-label>Shipping Fee</ion-label>
    <ion-note>{{AmountOfConversion(shopDetail.expressFee)}}</ion-note>
  </ion-item>

  <ion-item lines='none' style="color: #666666;background: #fff;" (click)="goodsSize()">
    <ion-label>Size Chart</ion-label>
    <!-- <img style="width: 10px; height: 18px; margin-right: 5px;background: #fff;" src="../../../../assets/img/right.png" alt=""> -->
  </ion-item>
  <div class="appraise padding-details">
    <ion-label style=" font-size: 1.2rem;
              padding-left: 5px;
              padding-top: 5px;
              line-height: 3rem;">Product Reviews</ion-label>
    <div class="appraise-list" *ngFor="let item of commentList">
      <div class="appraise-person">
        <img src="{{item.avatarUrl}}" alt="" onerror="this.src='assets/img/activity/touxiang.png';this.onerror=null">
        <!-- <label>昵称</label> -->
        <div style="float: left;margin-left: 10px;">
          <p>{{item.nickName}}</p>
          <p class="xingxing"> <img src="../../../../assets/img/xingxing.png" alt="" *ngIf="item.appraise >0">
            <img src="../../../../assets/img/xingxing-1.png" alt="" *ngIf="item.appraise <= 0">
            <img src="../../../../assets/img/xingxing.png" alt="" *ngIf="item.appraise >2">
            <img src="../../../../assets/img/xingxing-1.png" alt="" *ngIf="item.appraise <= 0">
            <img src="../../../../assets/img/xingxing.png" alt="" *ngIf="item.appraise >4">
            <img src="../../../../assets/img/xingxing-1.png" alt="" *ngIf="item.appraise <= 4">
            <img src="../../../../assets/img/xingxing.png" alt="" *ngIf="item.appraise >6">
            <img src="../../../../assets/img/xingxing-1.png" alt="" *ngIf="item.appraise <= 6">
            <img src="../../../../assets/img/xingxing.png" alt="" *ngIf="item.appraise >8">
            <img src="../../../../assets/img/xingxing-1.png" alt="" *ngIf="item.appraise <= 8"></p>
        </div>
        <span>{{strFormatData(item.createDate)}} </span>

      </div>
      <div class="appraise-info">
        <ion-text class="goods-name"
          style="color:#666666;font-weight:500;font-family:PingFang SC;padding-right: 2px !important;">
          {{item.comment}}
        </ion-text>
      </div>
    </div>
    <div class="appraise-line"></div>
    <div style="width: 100%;margin-top: 10px;" *ngIf="commentListLength>0" class="text-center">
      <button class="more-btn" (click)="onClickMore()">See more({{commentListLength}})</button>
    </div>
  </div>
  <!-- solaImage() -->
  <img style="width: 100%;" onerror="this.src='../../../../assets/img/index/pic.png';this.onerror=null"  src="{{solaImage(shopDetail.procDetailImg)}}" alt="">
  <!-- <img style="width: 100%;" src="../../../../assets/img/activity/pic.png" alt=""> -->
  <div style="height: 48px;"></div>
  <ion-footer class="footer details-footer">

    <div class="text-center float-left kefu" style="width:22%;" (click)="onTtKeFu()">
      <img src="../../../../assets/img/kefu.png" alt="">
      <p style="line-height: 10px;">Customer service</p>
    </div>

    <div class="text-center float-left kefu" style="width:18%;margin-left: -1px;" (click)="onCollect()">
      <img src="../../../../assets/img/shoucang.png" *ngIf="collectId==''?true:false" alt="">
      <img src="../../../../assets/img/shoucang-1.png" *ngIf="collectId==''?false:true" alt="">
      <p>Favorite</p>
    </div>
    <button (click)="buy(1)">Add to cart</button>
    <span></span>
    <button (click)="buy(2)">Checkout</button>
  </ion-footer>
</ion-content>